<template>
  <div>
    <!--新闻分类tab栏-->
    <mt-navbar class="page-part" v-model="selected">
      <mt-tab-item v-for="(productCate,index) in productCate" :id="productCate._id" @click.native="changeCate">{{productCate.title}}</mt-tab-item>
    </mt-navbar>
    <!--搜索栏-->
    <div class="search">
      <input type="text" v-model="searchWord"/>
      <mt-button type="default" @click.native="getSearch">搜索</mt-button>
    </div>
    <div class="content" v-for="(productListByCate,index) in productListByCate">
      <img v-lazy.container="`http://localhost:3000/${productListByCate.img[0].filename}`" class="left"/>
      <div class="left">
        <p class="name">{{productListByCate.name}}</p>
        <div>
          <span class="left price">¥:<b>{{productListByCate.price}}</b></span>
          <mt-button type="danger" class="right buy" @click.native="addCart($event)" :id="productListByCate._id">立即抢购</mt-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapGetters,mapActions} from 'vuex';
  export default {
    data(){
      return{
        selected:'',
        searchWord:'',
        id:'',
      }
    },
    computed: {
        ...mapGetters(['productCate','productListByCate','cart']),
    },
    methods:{
        ...mapActions(['getProductCate','getProductListByCate','getAddCart']),
        changeCate(){
            this.getProductListByCate({categoryId:this.selected});
        },
        getSearch(){
          this.getProductListByCate({name:this.searchWord});
        },
        addCart(e){
          this.getAddCart({id:e.target.getAttribute("id")});
        }
    },
    created(){
        this.getProductCate({});
        this.getProductListByCate({})
    }
  }
</script>
<style>
  .search{overflow:hidden;margin-top:3px;box-sizing:border-box;}
  .search input{width:85%;float:left;border:1px solid #666;box-sizing:border-box;height:30px;}
  .search button{float:right;display:inline-block;width:15%;height:30px;text-align:center;box-sizing:border-box;border:1px solid #666;font-size:12px;line-height:30px}
  .content{overflow:hidden;}
  .content img{width:25%}
  .content>div{width:75%}
  .content .price{color:red;padding-left:5px;}
  .content .name{padding:5px;}
  .content b{font-size:14px;}
  .content button{font-size:12px;height:24px;padding:0 5px}
  .left{float:left}
  .right{float:right}

</style>
